// 数独渲染器组件
export const renderSudokuGrid = (ctx, canvas, grid, startX, startY, gridSize) => {
  const size = grid.length;
  
  // 获取方块大小
  const getBoxSize = (size) => {
    if (size === 9) return { rows: 3, cols: 3 };
    if (size === 6) return { rows: 2, cols: 3 };
    if (size === 4) return { rows: 2, cols: 2 };
    throw new Error('不支持的数独大小');
  };

  const boxSize = getBoxSize(size);
  
  // 计算最佳网格尺寸和位置
  const minDimension = Math.min(canvas.width, canvas.height);
  const maxGridSize = minDimension * 0.8; // 使用较短边的80%作为最大尺寸
  const actualGridSize = Math.min(gridSize, maxGridSize);
  
  // 确保网格完全居中
  const actualStartX = Math.floor((canvas.width - actualGridSize) / 2);
  const actualStartY = Math.floor((canvas.height - actualGridSize) / 2);
  
  // 计算单元格大小
  const cellSize = actualGridSize / size;
  
  // 添加背景以清除之前的内容
  const padding = Math.max(20, actualGridSize * 0.05);
  ctx.fillStyle = '#FFFFFF';
  ctx.fillRect(
    actualStartX - padding,
    actualStartY - padding,
    actualGridSize + padding * 2,
    actualGridSize + padding * 2
  );

  // 绘制网格线
  const drawGridLines = () => {
    // 使用设备像素比来确保线条清晰
    const dpr = window.devicePixelRatio || 1;
    const baseLineWidth = Math.max(1, (actualGridSize / 400) * dpr);
    const thickLineWidth = baseLineWidth * 2;
    
    ctx.strokeStyle = '#000000';
    
    // 确保线条位置精确到设备像素
    const alignToPixel = (coord) => Math.round(coord * dpr) / dpr;
    
    // 绘制基础网格线
    ctx.lineWidth = baseLineWidth;
    for (let i = 0; i <= size; i++) {
      const x = alignToPixel(actualStartX + i * cellSize);
      const y = alignToPixel(actualStartY + i * cellSize);
      
      // 水平线
      ctx.beginPath();
      ctx.moveTo(alignToPixel(actualStartX), y);
      ctx.lineTo(alignToPixel(actualStartX + actualGridSize), y);
      ctx.stroke();
      
      // 垂直线
      ctx.beginPath();
      ctx.moveTo(x, alignToPixel(actualStartY));
      ctx.lineTo(x, alignToPixel(actualStartY + actualGridSize));
      ctx.stroke();
    }
    
    // 绘制粗线（分隔宫格）
    ctx.lineWidth = thickLineWidth;
    for (let i = 0; i <= size; i += boxSize.cols) {
      const x = alignToPixel(actualStartX + i * cellSize);
      ctx.beginPath();
      ctx.moveTo(x, actualStartY);
      ctx.lineTo(x, actualStartY + actualGridSize);
      ctx.stroke();
    }
    for (let i = 0; i <= size; i += boxSize.rows) {
      const y = alignToPixel(actualStartY + i * cellSize);
      ctx.beginPath();
      ctx.moveTo(actualStartX, y);
      ctx.lineTo(actualStartX + actualGridSize, y);
      ctx.stroke();
    }
  };

  // 填充数字
  const fillNumbers = () => {
    // 根据设备像素比调整字体大小，但对手机端做特殊处理
    const dpr = window.devicePixelRatio || 1;
    
    // 检测是否为移动设备
    const isMobile = window.innerWidth <= 768;
    
    // 为移动设备调整字体大小比例
    const fontSizeRatio = isMobile ? 0.4 : 0.6;
    
    const baseFontSize = Math.min(
      cellSize * fontSizeRatio,
      actualGridSize / (size * (isMobile ? 2 : 1.5))
    );  // 移除dpr乘数，因为这会导致手机上字体过大

    ctx.font = `bold ${baseFontSize}px Arial`;
    ctx.fillStyle = '#333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    for (let row = 0; row < size; row++) {
      for (let col = 0; col < size; col++) {
        if (grid[row][col] !== 0) {
          const x = actualStartX + col * cellSize + cellSize / 2;
          const y = actualStartY + row * cellSize + cellSize / 2;
          ctx.fillText(
            grid[row][col].toString(),
            x,
            y
          );
        }
      }
    }
  };

  // 执行渲染
  drawGridLines();
  fillNumbers();

  return {
    gridSize: actualGridSize,
    startX: actualStartX,
    startY: actualStartY,
    cellSize
  };
}; 